<template>
	<view style="display: flex; flex-direction: column; align-items: center;justify-content: center;">
		<!-- 轮播图 -->
		<view style="height: 350rpx; width: 100%;" class="carousel">
			<view class="carousel-inner" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
				<view class="carousel-item" v-for="(image, index) in images" :key="index">
					<img style="width: 100%;height: 350rpx;" :src="image" alt="轮播图" />
				</view>
			</view>
			<view class="carousel-counter">{{ currentIndex + 1 }}/{{ images.length }}</view>
			<button class="prev" @click="prevSlide">❮</button>
			<button class="next" @click="nextSlide">❯</button>
		</view>

		<!-- 厂信息 -->
		<view style="width: 100%; padding: 20rpx;margin-left: 30rpx;">
			<text class="store-name">{{ store.name }}</text>
			<view style="display: flex; align-items: center; margin-top: 10rpx;">
				<text class="store-star">{{ store.star }}</text>
				<text class="store-score">{{ store.score }}分</text>
				<text class="store-sales" style="margin-left:25%;">销量：{{ store.sales }}</text>
			</view>
			<view class="store-business-hours" style="margin-top: 10rpx;">
				营业时间：{{ store.businessHours }}
			</view>
			<view class="store-address" style="display: flex; align-items: center; margin-top: 10rpx;">
				<text>{{ store.address }}</text>
				<image :src="store.logo" style="width: 30rpx; height: 30rpx; margin-left: 10rpx;"></image>
			</view>
			<!-- 水平分割线 -->
			<view class="separator" style="margin-top: 10rpx;"></view>
		</view>

		<!-- 服务 -->
		<view style=" width: 100%;">
			<view style="display: flex; margin: 10rpx 40rpx;flex-direction: column;">
				<text class="section-title">服务</text>
				<view v-for="(service, index) in services" :key="index" style="display: flex; align-items: center; margin: 10rpx;">
					<checkbox :value="service.name" @change="toggleServiceSelection(service)"></checkbox>
					<text style="margin-left: 10rpx;">{{ service.name }}</text>
					<text style="margin-left: auto;">¥{{ service.price }} <del style="color: #ff0000;margin-left: 80rpx;">¥{{ service.originalPrice }}</del></text>
				</view>
			</view>
			<!-- 水平分割线 -->
			<view class="separator" style="margin-top: 10rpx;"></view>
			<!-- 评论 -->
			<view style="width: 70%; margin-left: 70rpx;">
				<text style=" margin-top: 10rpx;">
					服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍服务介绍
				</text>
			</view>
		</view>

		<!-- 服务评价 -->
		<view style="width: 100%; margin-left: 90rpx;">
			<text class="section-title">服务评价</text>
			<view style="display: flex; margin-top: 10rpx;">
				<image src="../../../static/logo.png" style="width: 50rpx; height: 50rpx; border-radius: 50%;"></image>
				<view style="display: flex;flex-direction: column;margin-left: 20rpx;">
					<text style="margin-left: 10rpx; font-weight: bold;">李**</text>
					<text class="store-star">{{ store.star }}</text>
				</view>
				<text style="margin-left: 40%;">2022-09-10</text>
			</view>
			<!-- 评论内容 -->
			<view style="width: 70%; margin-left: 70rpx;">
				<text style=" margin-top: 10rpx;">
					服务评价内容服务评价内容服务评价内容服务评评价内容服务评价内容服务评
				</text>
			</view>
			<view style="margin-top: 10rpx;margin-left: 70rpx;">
				<image src="../../../static/logo.png" style="width: 150rpx; height: 100rpx; margin-right: 10rpx;"></image>
				<image src="../../../static/logo.png" style="width: 150rpx; height: 100rpx;"></image>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view style="display: flex; position: fixed; bottom: 0;">
			<button @click="toggleCartModal" style="border-radius: 15%; width: 200rpx; height: 80rpx; background-color: #ff4d4f; color: #fff; margin: 5rpx 20rpx;">
				购物车({{ selectedServices.length }})
			</button>
			<button style="border-radius: 15%; width: 200rpx; height: 80rpx; background-color: #ffa940; color: #fff; margin: 5rpx 20rpx;">
				确认已选服务
			</button>
		</view>

		<!-- 购物车弹窗 -->
		<view v-if="isCartModalVisible" style="position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; padding: 20rpx; border-top: 1px solid #ccc;">
			<view>
				<text style="font-weight: bold; font-size: 30rpx;">服务订单</text>
				<view v-for="(service, index) in selectedServices" :key="index" style="display: flex; align-items: center; margin-top: 10rpx;">
					<text>{{ service.name }}</text>
					<text style="margin-left: auto;">¥{{ service.price }}</text>
				</view>
				<view style="margin-top: 20rpx; display: flex; align-items: center; justify-content: space-between;">
					<text>合计：¥{{ totalPrice }}</text>
					<button @click="toggleCartModal" style="background-color: #ffa940; color: #fff; padding: 10rpx; border-radius: 10rpx;">确认已选服务</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentIndex: 0,
			isCartModalVisible: false,
			selectedServices: [],
			images: [
				'../../../static/logo.png',
				'../../../static/logo.png',
				'../../../static/logo.png'
			],
			store: {
				logo: "../../../static/logo.png",
				name: "伟业汽车保养厂（人民路店）",
				distance: 322,
				star: "★★★☆☆",
				score: "3.5",
				sales: 322,
				businessHours: "周一至周五 09:00-22:00",
				address: "山阳区人民中路32号"
			},
			services: [
				{ name: '小保养套餐1（合成机油+机滤）', price: 199, originalPrice: 299 },
				{ name: '日式水晶打蜡', price: 199, originalPrice: 299 },
				{ name: '轮胎补气', price: 199, originalPrice: 299 }
			]
		};
	},
	computed: {
		// 动态计算已选服务的总价格
		totalPrice() {
			return this.selectedServices.reduce((sum, service) => sum + service.price, 0);
		}
	},
	methods: {
		// 切换购物车弹窗显示状态
		toggleCartModal() {
			this.isCartModalVisible = !this.isCartModalVisible;
		},
		// 选择/取消选择服务
		toggleServiceSelection(service) {
			const index = this.selectedServices.findIndex(s => s.name === service.name);
			if (index >= 0) {
				this.selectedServices.splice(index, 1);
			} else {
				this.selectedServices.push(service);
			}
		},
		// 轮播图控制
		nextSlide() {
			this.currentIndex = (this.currentIndex + 1) % this.images.length;
		},
		prevSlide() {
			this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
		}
	}
};
</script>

<style>
.carousel {
	position: relative;
	overflow: hidden;
}

.carousel-inner {
	display: flex;
	transition: transform 0.5s ease;
}

.carousel-item {
	min-width: 100%;
}

.carousel img {
	width: 100%;
	height: 100%;
}

.carousel-counter {
	position: absolute;
	bottom: 10rpx;
	right: 10rpx;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 5rpx 10rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
}

.prev, .next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(255, 255, 255, 0.5);
	border: none;
	cursor: pointer;
	padding: 10rpx;
}

.prev {
	left: 10rpx;
}

.next {
	right: 10rpx;
}

.store-name {
	font-size: 30rpx;
	font-weight: bold;
}

.store-distance, .store-score,.store-star {
	color: #999;
	font-size: 28rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
}

/* 水平分割线 */
.separator {
	border-bottom: 1px solid #ccc;
}


</style>